<template>
	<view>
		<navbar title="订单详情"></navbar>
		<view class="address-wrapper">
			<view class="title flex">
				<view class="name" v-if="info.secondType == 1">帮送</view>
				<view class="name" v-if="info.secondType == 0">帮取</view>
				<view class="time flex1 fa">
					<view>{{info.type == 0 ? '配送时间' : info.secondType == 0 ? '收货时间' : '发货时间'}}：</view>
					<view class="flex1 fa">
						<view class="day">{{info.day}}</view>
						<view>{{info.receivingTime}}</view>
						<view>~</view>
						<view>{{info.receivingEndTime}}</view>
					</view>
				</view>
			</view>
			<view class="address-box">
				<view class="address-list flex jscb" v-if="info.type == 1">
					<view class="flex1 flex">
						<image class="receive-icon" src="../../static/fetch.png" mode=""></image>
						<view class="flex1">
							<view class="address">{{info.fetchEstate}}{{info.fetchDetails}}</view>
							<view class="contact">{{info.fetchName}}</view>
						</view>
					</view>
				</view>
				<view class="address-list flex jscb">
					<view class="flex1 flex">
						<image class="receive-icon" src="../../static/receive.png" mode="" v-if="info.type == 1"></image>
						<image class="receive-icon2" src="../../static/receive2.png" mode="" v-else></image>
						<view class="flex1">
							<view class="address">{{info.sendEstate}}{{info.sendDetails}}</view>
							<view class="contact">{{info.sendName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-wrapper" v-if="info.type == 0">
			<view class="title">订单商品</view>
			<view class="goods-box">
				<view class="goods-list flex" v-for="(item, index) in info.ordersItemVoList" :key="index">
					<image class="goods-img" :src="item.mainImg" mode=""></image>
					<view class="goods-right flex1 flex fdc jcsb">
						<view>
							<view class="goods-name ell2">{{item.name}}</view>
							<view class="fa jcsb">
								<view class="spec">{{item.skuName}}</view>
								<view class="minor">x{{item.num}}</view>
							</view>
						</view>
						<view class="price-box">
							<view class="price fa">
								<view>￥</view>
								<view class="num">{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remark" v-if="info.type == 0">
			<view class="title">订单备注</view>
			<view class="content">{{info.memo || '无'}}</view>
		</view>
		<view v-if="info.type == 1">
			<view class="money-box">
				<view class="money-list fa jcsb" v-if="info.productType">
					<view>物品类型</view>
					<view class="cl3">{{info.productType}}</view>
				</view>
				<view class="money-list fa jcsb" v-if="info.weight">
					<view>货物重量</view>
					<view class="cl3">{{info.weight}}kg</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-list fa jcsb">
					<view>{{info.type == 0 ? '配送时间' : info.secondType == 0 ? '收货时间' : '发货时间'}}：</view>
					<view class="red fa">
						<view style="margin-right: 10rpx;">{{info.day}}</view>
						<view>{{info.receivingTime}}~{{info.receivingEndTime}}</view>
					</view>
				</view>
				<view class="info-list">
					<view>备注</view>
					<view class="prompt">{{info.memo || '无'}}</view>
				</view>
				<view class="info-list">
					<view>特殊要求</view>
					<view class="prompt">{{info.specialMemo || '无'}}</view>
					<view class="upload-wrapper">
						<view class="upload-box flex fww">
							<view class="upload-list" v-for="(item, index) in info.specialMemoImg" :key="index">
								<image :src="item" @click="utils.previewImage(info.specialMemoImg, index)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box fa">
			<view class="btn-list fa jcc" @click="serviceCall">
				<image class="phone-icon" src="../../static/phone.png" mode=""></image>
				<view>联系客服</view>
			</view>
			<view class="btn-list fa jcc" @click="phoneCall">
				<image class="phone-icon" src="../../static/phone.png" mode=""></image>
				<view>联系用户</view>
			</view>
		</view>
		<view class="fixed-bottombar" v-if="tid">
			<view class="bottombar-box fa jcc">
				<view class="confirm-button fa jcc" @click="receiveOrder">立即接单</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				tid: '',
				info: {
					ordersItemVoList: [],
					today: ''
				},
				phone: ''
			};
		},
		onLoad(options) {
			if(options.id) {
				this.id = options.id
				this.getInfo()
				this.getServiceInfo()
			}
			if(options.tid) {
				// 有tid(从服务卡品跳进来)就显示接单按钮，用户上班状态就弹出订阅弹窗
				this.tid = options.tid
				this.api.userinfoFunc().then(res => {
					if(res.code == 200) {
						if(res.data.state == 1) {
							uni.showModal({
								title: '提示',
								content: '是否订阅订单消息通知',
								success: res => {
									if(res.confirm) {
										wx.requestSubscribeMessage({
											tmplIds: ['HQ4lLIvbYkpRL7hu8Po9gG-1UfmIZ4w502w_QxSBN4w'],
											success: res => {},
											fail: err => {}
										})
									}
								}
							})
						}
					}
				})
			}
		},
		methods: {
			getInfo() {
				this.api.hallInfoFunc({
					ordersId: this.id
				}).then(res => {
					if(res.code == 200) {
						this.info = res.data
						this.info.today = this.info.day.substr(5, 2) + '.' + this.info.day.substr(8, 2)
						if(this.info.specialMemoImg) {
							this.info.specialMemoImg = this.info.specialMemoImg.split(',')
						}
					}
				})
			},
			getServiceInfo() {
				this.api.appSettingFunc({
					groupKey: 'kf'
				}).then(res => {
					if(res.code == 200) {
						this.phone = res.data.phone
					}
				})
			},
			serviceCall() {
				let phoneNumber = String(this.phone)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			// 联系用户
			phoneCall() {
				let phoneNumber = String(this.info.sendPhone)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			// 接单
			receiveOrder() {
				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: result => {
						if(result.confirm) {
							this.api.orderTakeFunc({
								ordersIds: this.id
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '接单成功'
									})
									setTimeout(() => {
										uni.navigateBack({
											fail: () => {
												uni.switchTab({
													url: '/pages/index/index'
												})
											}
										})
									}, 1500)
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-wrapper{
		margin: 28rpx 28rpx 0;
		padding: 0 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.title{
			padding: 24rpx 0;
			border-bottom: 2rpx solid #eee;
			.name{
				margin-right: 14rpx;
				padding: 0 14rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #18C954;
				background-color: #E7F4EA;
			}
			.time{
				font-size: 24rpx;
				.day{
					margin-right: 10rpx;
				}
			}
		}
		.address-box{
			padding-bottom: 32rpx;
		}
		.address-list{
			position: relative;
			margin-top: 32rpx;
			.receive-icon{
				margin-right: 14rpx;
				width: 46rpx;
				height: 40rpx;
			}
			.receive-icon2{
				margin-right: 14rpx;
				width: 46rpx;
				height: 46rpx;
			}
			.address{
				font-size: 30rpx;
				font-weight: bold;
			}
			.contact{
				margin-top: 2rpx;
				font-size: 24rpx;
				color: #999;
				line-height: 28rpx;
			}
			.right-icon{
				margin-left: 10rpx;
				width: 36rpx;
				height: 36rpx;
			}
			.noaddress{
				padding: 20rpx 0;
			}
		}
	}
	.goods-wrapper{
		margin: 20rpx 28rpx 0;
		padding-bottom: 30rpx;
		border-radius: 24rpx;
		background-color: #fff;
		.title{
			padding: 28rpx 28rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}
		.goods-box{
			padding: 4rpx 20rpx 0;
			.goods-list{
				margin-top: 24rpx;
				.goods-img{
					margin-right: 20rpx;
					width: 136rpx;
					height: 136rpx;
					border-radius: 8rpx;
				}
				.goods-right{
					padding-bottom: 6rpx;
				}
				.goods-name{
					margin-bottom: 4rpx;
					width: 460rpx;
				}
				.spec{
					font-size: 24rpx;
					color: #777;
					line-height: 40rpx;
				}
				.price-box{
					margin-top: 10rpx;
					.price{
						color: #FE3134;
						font-weight: bold;
						.num{
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}
	.remark{
		margin: 24rpx 28rpx 0;
		padding: 24rpx 28rpx 28rpx;
		border-radius: 24rpx;
		background-color: #fff;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.content{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #777;
		}
	}
	.money-box{
		margin: 20rpx 24rpx 0;
		padding: 0 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.money-list{
			padding: 30rpx 0;
			border-bottom: 1rpx solid var(--border);
			&:last-child{
				border-bottom: none;
			}
			.red{
				font-size: 26rpx;
				font-weight: bold;
				color: #FE3134;
			}
			.left{
				width: 140rpx;
			}
			.right{
				flex: 1;
				text-align: right;
			}
			.avatar{
				margin-right: 22rpx;
				width: 60rpx;
				height: 60rpx;
				border-radius: 8rpx;
			}
			.mobile{
				margin-left: 12rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
	.info-box{
		margin: 20rpx 24rpx 0;
		padding: 0 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.info-list{
			padding-top: 26rpx;
			padding: 26rpx 0;
			border-bottom: 2rpx solid var(--border);
			&:last-child{
				border-bottom: none;
			}
		}
		.red{
			color: #FE3134;
		}
		.code{
			font-size: 34rpx;
			font-weight: bold;
		}
		.prompt{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #777;
		}
		.upload-wrapper{
			border-radius: 10rpx;
			.upload-box{
				margin-top: 26rpx;
			}
			.upload-list{
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				width: 152rpx;
				height: 152rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
				image{
					width: 152rpx;
					height: 152rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.btn-box{
		margin: 24rpx 28rpx 0;
		.btn-list{
			width: 336rpx;
			height: 114rpx;
			border-radius: 24rpx;
			font-size: 30rpx;
			background-color: #fff;
			&:last-child{
				margin-left: 22rpx;
			}
			.phone-icon{
				margin-right: 20rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			position: fixed;
			z-index: 99;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 28rpx;
			height: 120rpx;
			background-color: #fff;
			.confirm-button{
				width: 100%;
				height: 84rpx;
				border-radius: 42rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
			}
		}
		.fixed-place{
			height: calc(120rpx + env(safe-area-inset-bottom));
		}
	}
</style>
